<template>
    <div ref="chartRef" :style="{ height: '480px', width: '100%' }"></div>
</template>

<script lang="ts" setup>
import { ref, Ref, watch, onMounted } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
import { countSpeciality } from './BaomingStatistics.api'

const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)

onMounted(() => {
    initData()
})

/**
 * 初始化数据
 */
async function initData() {
    countSpeciality().then(res => {
        console.log(res.data)

        let head = [];
        let max = 10;
        let data = [];

        res.data.forEach(item => {
            head.push(item.specialityName);
            data.push(item.num);
        });


        setOptions({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    lineStyle: {
                        width: 1,
                        color: '#019680',
                    },
                },
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['', ...head, ''] as any,
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        type: 'solid',
                        color: 'rgba(226,226,226,0.5)',
                    },
                },
                axisTick: {
                    // show: false,
                    alignWithLabel: true
                },
            },
            yAxis: [
                {
                    type: 'value',
                    // max: max,
                    // splitNumber: 4,
                    minInterval: 1,
                    axisTick: {
                        show: false,
                    },
                    name: '专业',
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
                        },
                    },
                },
            ],
            grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
            series: [
                {
                    name: '数量',
                    smooth: true,
                    data: [0, ...data, 0] as any,
                    type: 'bar',
                    areaStyle: {},
                    itemStyle: {
                        color: '#5ab1ef',
                    },
                },
            ],
        })

    })
}
</script>